<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- provide 和 inject
    链接:https://cn.vuejs.org/guide/components/provide-inject.html#prop-drilling

    使用：
    1. 用 provide(key, value) 提供可注入的数据
    2. 用 inject(key)    来获取 provide 的内容
-->

<body>
<div id="app">

</div>
</body>
<script src="js/vue.js"></script>
<script>

    // 子组件
    const Son = {
        setup(props, context) {
            const {provide, inject} = Vue;

            // 注入 provide 中的值
            // 也可以使用 函数来获取默认值 const value = inject('key', () => new ExpensiveClass())
            const brand = inject('brand', '默认值');   //  如果没有 provide 中的内容，这里就显示默认值
            const college = inject('college');

            return {
                brand, college
            }
        },
        template: `
          <div style="width: 300px; height: 200px; background-color: cornflowerblue">
            子组件
              <div> 品牌: {{ brand }}</div>
              <div>名称：{{ college.name }}  -- 网址 ： {{ college.site }}</div>
          </div>
        `
    };

    // 父组件
    const Father = {
        components: {
            "lk-son": Son
        },
        template: `
          <div style="width: 400px; height: 400px; background-color: aquamarine">
          父组件
          <lk-son></lk-son>
          </div>
        `
    }

    // 根组件
    const app = Vue.createApp({
        setup(props, context) {
            const {ref, reactive, provide, inject} = Vue;
            let brand = ref('Java');
            let college = reactive({name: '北京', site: 'http://localhost'});

            // 提供可以注入的值
            // provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
            // provide('brand', brand);
            provide('college', college);
        },
        components: {
            "lk-father": Father
        },
        template: `
          <div> 根组件
          <lk-father></lk-father>
          </div>
        `
    }).mount("#app");

</script>

</html>
